<template>
    <div class="round-discuss">  <i class="el-icon-orange" style="color: #0084ff;font-size: 34px"></i>
        <i style="font-size: 25px;color: #121212;padding-left: 12px;font-weight: 600;">圆桌讨论</i>

        <el-row class="topic" type="flex" justify="center" style="">
            <!--        左边-->
            <el-col :span="12"  type="flex">
                <div class="topic-item" style="background-color: white;border-radius: 4px;" >
                   <div class="">
                       <el-row class="dis-head1" justify="right">
                           <el-col :span="8"><div class="grid-content bg-purple" style=" color: rgba(136, 188, 186,1); ">1</div></el-col>
                           <el-col :span="16"><div class="grid-content bg-purple-light" style="margin-left: 70px">
                               <i style="font-size: 60px;margin-bottom: 5px;font-weight: lighter">2020 不完全购车指南</i></div></el-col>
                       </el-row>
                       <div class="over-topic"> <div class="topic-title">
                           <a class="discribe-title" >2020 不完全购车指南</a>
                           <a class="discribe" >广州车展即将开幕，是时候盘点一波本年度那些最值得购买的新车啦！不管是轿车还是跑车，SUV 还是 MPV，油车还是电车……欢迎和知乎汽车领域的优秀答主们一起讨论！</a>
                           <el-row justify="right">
                               <el-col :span="15"><div class="grid-content bg-purple">
                                   <i style="font-size: 13px;padding: 15px">20 位嘉宾参与  |  82 人关注</i></div></el-col>
                               <el-col :span="9"><div class="grid-content bg-purple-light">
                                   <button id="btn1" class="dis-btn1" @click="handleBtn1(this)">关注圆桌</button></div></el-col>
                           </el-row>
                        </div>
                       </div>
                        </div>
                    <div class="round-item">
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/50748307">我想买一辆新能源汽车，但是该如何挑选？需要注意什么？</a>
                            <span>3个回答</span>
                        </div>
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/429655005">15 万左右性价比不错的 SUV 有哪些推荐？</a>
                            <span>118个回答</span>
                        </div>
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/420204791">特斯拉Model3， 蔚来ES6， 理想ONE， 小鹏P7怎么选？</a>
                            <span>55个回答</span>
                        </div>
                    </div>
                   

                </div>
            </el-col>
            <!--右边-->
            <el-col :span="12"  type="flex">
                <div class="topic-item" style="background-color: white;border-radius: 4px;" >
                    <div class="">
                        <el-row class="dis-head2" justify="right">
                            <el-col :span="8"><div class="grid-content bg-purple" style=" color: rgb(20, 57, 179);; ">1</div></el-col>
                            <el-col :span="16"><div class="grid-content bg-purple-light" style="margin-left: 70px">
                                <i style="font-size: 60px;margin-bottom: 5px;font-weight: lighter">2021年注册会计师备考</i></div></el-col>
                        </el-row>
                        <div class="over-topic" > <div class="topic-title">
                            <a class="discribe-title" >2021年注册会计师备考</a>
                            <a class="discribe" style="color: #F6F6F6">2021年注册会计师报名、考试、备考、成绩等问题探讨！大家可以积极通过这个圆桌参与更多注册会计师相关问题的交流，可以一起分享备考经验、心得、建议，希望大家在2021年的备</a>
                            <el-row justify="right">
                                <el-col :span="15"><div class="grid-content bg-purple"><i style="font-size: 13px;padding: 15px;color: #F6F6F6" >42 位嘉宾参与  |  78 人关注</i></div></el-col>
                                <el-col :span="9"><div class="grid-content bg-purple-light">
                                    <button id="btn2" class="dis-btn2" @click="handleBtn2(this)">关注圆桌</button></div></el-col>
                            </el-row>
                        </div>
                        </div>
                    </div>
                    <div class="round-Item">
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/331414440" target="_blank">如何保持最好的注会备考状态？</a>
                            <span>29个回答</span>
                        </div>
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/19637333" target="_blank">备考 CPA 的，有哪些经验可推荐？</a>
                            <span>182个回答</span>
                        </div>
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/425867641" target="_blank">打算考2021年cpa。听说教材每年都变。现在备考可以用2020年教材吗？2021年教材什么时候有呢?</a>
                            <span>75个回答</span>
                        </div>
                    </div>


                </div>
            </el-col>
        </el-row>

        <el-row class="topic" type="flex" justify="center" style="">
            <!--        左边-->
            <el-col :span="12"  type="flex">
                <div class="topic-item" style="background-color: white;border-radius: 4px;" >
                    <div class="">
                        <el-row class="dis-head3" >
                            <el-col :span="8"><div class="grid-content bg-purple" style=" color:rgb(66, 18, 101); ">1</div></el-col>
                            <el-col :span="16"><div class="grid-content bg-purple-light" style="margin-left: 70px">
                                <i style="font-size: 60px;margin-bottom: 5px;font-weight: lighter">收集 | 文案收藏馆</i></div></el-col>
                        </el-row>
                        <div class="over-topic"> <div class="topic-title">
                            <a class="discribe-title" >收集 | 文案收藏馆</a>
                            <a class="discribe" style="color: white" >无论是碎片化阅读，还是在深度阅读中，都会有很多触动我们心灵的话，它们给过我们力量，也曾给我们慰藉。所以，将那些值得被看到的句子，安置在这里</a>
                            <el-row justify="right">
                                <el-col :span="15"><div class="grid-content bg-purple"><i style="font-size: 13px;padding: 15px">42 位嘉宾参与  |  62 人关注</i></div></el-col>
                                <el-col :span="9"><div class="grid-content bg-purple-light">  <button id="btn3" class="dis-btn3" @click="handleBtn3(this)">关注圆桌</button></div></el-col>
                            </el-row>
                        </div>
                        </div>
                    </div>
                    <div class="round-item">
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/407266956">有没有隐晦表达悲伤的句子?</a>
                            <span>3个回答</span>
                        </div>
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/423070517">有没有发出去就被赞到99+的沙雕朋友圈文案？</a>
                            <span>255个回答</span>
                        </div>
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/424800914">有没有让人笑到直接裂开的沙雕朋友圈文案？</a>
                            <span>34个回答</span>
                        </div>
                    </div>


                </div>
            </el-col>

            <!--右边-->
            <el-col :span="12"  type="flex">
                <div class="topic-item" style="background-color: white;border-radius: 4px;" >
                    <div class="">
                        <el-row class="dis-head4" justify="right">
                            <el-col :span="8"><div class="grid-content bg-purple" style=" color: rgb(78, 97, 92); ">1</div></el-col>
                            <el-col :span="16"><div class="grid-content bg-purple-light" style="margin-left: 70px">
                                <i class="rit" style="font-size: 60px;margin-bottom: 5px;font-weight: lighter">疑问 | 人生，未来，死亡</i></div></el-col>
                        </el-row>
                        <div class="over-topic"> <div class="topic-title">
                            <a class="discribe-title" >疑问 | 人生，未来，死亡</a>
                            <a class="discribe" style="color: #F6F6F6">时光荏苒，岁月如梭，走过中高考，走过成年，步入大学，毕业工作。相信一直会有一个问题在你心中无人解答；‘我这一生，从哪里来到哪里去？’‘我是谁？’‘我所做的一切都是</a>
                            <el-row justify="right">
                                <el-col :span="15"><div class="grid-content bg-purple"><i style="font-size: 13px;padding: 15px;color: #F6F6F6" >88 位嘉宾参与  |  26 人关注</i></div></el-col>
                                <el-col :span="9"><div class="grid-content bg-purple-light">
                                    <button id="btn4" class="dis-btn4" @click="handleBtn4">关注圆桌</button>
                                </div></el-col>
                            </el-row>
                        </div>
                        </div>
                    </div>
                    <div class="round-item">
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/331414440" target="_blank">人应该怎样过这一生？？</a>
                            <span>150个回答</span>
                        </div>
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/19637333" target="_blank">人的一生到底该追求什么？</a>
                            <span>2,182个回答</span>
                        </div>
                        <div class="round-item">
                            <a href="https://www.zhihu.com/question/425867641" target="_blank">人类知道世界的终极真理后会疯掉吗?</a>
                            <span>1,075个回答</span>
                        </div>
                    </div>


                </div>
            </el-col>
        </el-row>

        <div style="text-align: center;padding: 10px 14px 0 24px;">
            <a href="https://www.zhihu.com/roundtable" target="_blank" class="more">查看更多圆桌  <i style="font-weight: bold" class="el-icon-arrow-right"></i> </a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RoundDiscuss",
        props: ['roundDiscuss','roundDiscussR'],
        methods:{
             handleBtn1(){
                var btn1=document.getElementById("btn1");
                if (btn1.innerHTML =="关注圆桌"){
                    btn1.innerHTML="已关注"
                    btn1.style.color="gray";
                }else if (btn1.innerHTML =="已关注"){
                    btn1.innerHTML="关注圆桌"
                    btn1.style.color="rgba(136, 188, 186,1)";
                }
            },
            handleBtn2(){
                var btn1=document.getElementById("btn2");

                if (btn1.innerHTML =="关注圆桌"){
                    btn1.innerHTML="已关注"
                    btn1.style.color="gray";
                }else if (btn1.innerHTML ="已关注"){
                    btn1.innerHTML="关注圆桌"
                    btn1.style.color="rgb(20, 57, 179)";
                }
            },
            handleBtn3(){
                var btn1=document.getElementById("btn3");
                if (btn1.innerHTML =="关注圆桌"){
                    btn1.innerHTML="已关注"
                    btn1.style.color="gray";
                }else if (btn1.innerHTML ="已关注"){
                    btn1.innerHTML="关注圆桌"
                    btn1.style.color="rgb(66, 18, 101)";
                }
            },
            handleBtn4(){
                var btn1=document.getElementById("btn4");
                if (btn1.innerHTML =="关注圆桌"){
                    btn1.innerHTML="已关注"
                    btn1.style.color="gray";
                }else if (btn1.innerHTML ="已关注"){
                    btn1.innerHTML="关注圆桌"
                    btn1.style.color="rgb(78, 97, 92)";
                }
            },

        }
    }
</script>

<style scoped>

    *{
        text-overflow: ellipsis;
        border-radius: 4px;

    }
    #el-col{
        background-color: #121212;
    }
    .dis-head1,.dis-head2,.dis-head3,.dis-head4{
        width: 100%;
        position: relative;
        height: 240px;
        color: hsla(0,0%,100%,.6);

    }

    .dis-head1{

        background-color: rgba(136, 188, 186,1);
        box-shadow: 0 1px 3px 0 rgba(18,18,18,.1);
        background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.32, rgb(136, 188, 199)), color-stop(0.46, rgb(136, 188, 185)), color-stop(0.93,  snow));
        /*background:rgba(136,188,199,0.5);*/

    }
    .dis-head2{
        -webkit-box-shadow: 0 1px 3px 0 rgba(18,18,18,.1);
        box-shadow: 0 1px 3px 0 rgba(18,18,18,.1);
        padding: 24px 0 20px;
        flex-shrink: 0;
        background-color: rgb(20, 57, 179);
    }
    .dis-head3{
        /*background-image: url(https://pic1.zhimg.com/50/v2-91ddcb937a6ebdc85ae67c184a2bd520_hd.jpg);*/
        background-position:center;
        background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.32, rgb(66, 18, 101)), color-stop(0.46, rgb(70, 23, 105)), color-stop(0.93, rgb(208, 196, 216)));
        /*background-color: #121212;*/
    }
    .dis-head4{
        /*background-image: url(https://pic4.zhimg.com/50/v2-ae999d25df04ac81f5e39a8f7c4012e3_hd.jpg);*/
        background-position: center center;
        background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.32, rgb(78, 97, 92)), color-stop(0.46, rgb(91, 95, 84)), color-stop(0.93, rgb(134, 98, 78)));

    }


    .over-topic{
        position: absolute;
        /*z-index: 99;*/
        top: 80px;
       margin-left: 15px;

    }

    .topic-item{
        /*height: 400px;*/
        /*width: 490px;*/
        margin:  10px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

    }
    .discribe-title{
        margin-bottom: 20px;display: block;
        height: 28px;
        line-height: 28px;
        color: white;
    }
    .discribe{
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        margin-top: 12px;
        height: 60px;
        line-height: 20px;
        font-size: 14px;
        color: white;
        /*color: darkslategrey;*/
        font-weight: bold;
    }
    .dis-btn1,.dis-btn2,.dis-btn3,.dis-btn4{
        margin-left: 170px;
        /*padding: 5px 20px;*/
        border: none;
        height: 34px;
        width: 88px;
        border-radius: 4px;
        font-weight: bold;
        outline: none;
        cursor: pointer;
    }
    .dis-btn1{
        background-color: white;
        color: rgba(136, 188, 186,1);
    }

    .dis-btn2{
        background-color: white;
        color: rgb(20, 57, 179);
    }
    .dis-btn3{
        background-color: white;
        /*background-position: center center;*/
        color: rgb(66, 18, 101);
    }
    .dis-btn4{
        background-color: white;
        /*background-position: center center;*/
        color: rgb(78, 97, 92);
    }

    .round-Item{
        /*line-height:15px;*/


    }
    .round-item{
        padding: 5px;
    }
    .round-item a{
        display: block;
        /*height: 20px;*/
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #000000;
        text-decoration: none;
        padding: 10px;
        font-weight: inherit;
    }
    .round-item span{
        font-size: 12px;
        font-weight: lighter;
        margin-left: 25px;
    }
    .topic-item img{
        height: 200px;
    }
    .topic{
        margin-top: 20px;
        /*margin-left: 40px;*/


    }
    .topic-title{
        width: 300px;
        height: 50px;
        display: inline-block;
        color:black;
        font-size: 25px;
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/

    }
    .grid-content{
        font-weight: bold;
    }
    .topic-head{
        padding: 18px;
        border-bottom: #F6F6F6 solid 2px;
    }
    .look{
        font-size: 15px;
        color: lightgrey;
        padding: 8px 0;
    }

    .watch_btn,.watch_btn2{
        /*width: 102px;*/
        border: none;
        height: 34px;
        width: 88px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        outline: none;

    }

    .watch_btn:active{
        background-color: #F6F6F6;
        color: #999!important

    }
    .big-title{
        width: 330px;
        line-height: 28px;
        max-height: 56px;
        font-size: 20px;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        color: inherit;
        -webkit-box-orient: vertical;
        font-weight: 600;
    }
    .contentTag{
        border-radius: 5px;
        background-color: #F6F6F6;
        flex-shrink: 0;
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #8590a6;
        text-decoration: none;
        /*margin:  5px;*/
    }
    .contentTitle{
        margin-left: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: inherit;
        text-decoration: none;
        font-size: 15px;

    }
    .bang a{
        margin: 5px;

    }
    .more{
        /*background-color: white;*/
        border-radius: 25px;
        color: #8590a6;

        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 5px 14px 5px 24px;
        height: 48px;
        margin-top: 25px;
        background-color: #fff;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
    }


</style>